<%--
  Created by IntelliJ IDEA.
  User: HUAWEI
  Date: 2022/12/4
  Time: 18:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户平台</title>
    <!-- layui库的css引入 -->
    <link rel="stylesheet" href="./layui/css/layui.css">
    <!-- 自己的css引入 -->
    <link rel="stylesheet" href="./css/index.css">
    <!--  -->
    <script src="./js/index two.js"></script>
</head>
<body>
<!-- 容器哦 -->
<div class="layui-fluid">
    <!-- 第一行 -->
    <div class="layui-row">
        <!-- 行中第一列 -->
        <div class="layui-col-md10">
            <span class="logo">智慧社区服务管理平台</span>
        </div>
        <!-- 行中的第一列  结束-->

        <!-- 行中的第二列 -->
        <div class="layui-col-md2">
            <ul class="layui-nav layui-bg-blue">
                <li class="layui-nav-item">
                    <a href="javascript:;">个人中心<span class="layui-badge-dot"></span></a>
                </li>
                <li class="layui-nav-item">
                    <a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">${sessionScope.username}</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">修改信息</a></dd>
                        <dd><a href="javascript:;">安全管理</a></dd>
                        <dd><a href="/logout" id="logout">退出登录</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
        <!-- 行中的第二列 结束-->
    </div>
    <!-- 第一行 结束-->

    <!-- 第二行 -->
    <div class="layui-row hightsizebox">

        <!-- 第二行中第一列 -->
        <div class="layui-col-md2 two-hightsize-one">
            <ul class="layui-nav layui-nav-tree nav-boxsize" lay-filter="test">
                <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
                <li class="layui-nav-item layui-nav-itemed layui-nav-child-c">
                    <a href="javascript:;">业务功能</a>
                    <dl class="layui-nav-child dl-box">
                        <dd><a href="javascript:;">信息报备</a></dd>
                        <!-- <dd><a href="javascript:;">发布公告</a></dd> -->
                        <dd><a href="javascript:;">回到首页</a></dd>
                    </dl>
                </li>

                <li class="layui-nav-item layui-nav-child-c "><a href="javascript:;" class="gonggao">公告</a></li>
                <li class="layui-nav-item layui-nav-child-c"><a href="javascript:;" class="guanyuwomen">关于我们</a></li>
            </ul>
        </div>
        <!-- 第二行中第一列 结束-->

        <!-- 第二行中第二列 -->
        <div class="layui-col-md10 two-hightsize-two">
            <ul class="two-row-two">
                <!-- 内容一 -->
                <li class="hidden">
                    <div class="layui-container two-container-row dd">
                        <form class="layui-form" action="/usermsg" method="post">
                            <input type="text" name="code" hidden value="0">
                            <div class="layui-form-item">
                                <label class="layui-form-label">姓名：</label>
                                <div class="layui-input-block">
                                    <input type="text" name="name" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">年龄：</label>
                                <div class="layui-input-block">
                                    <input type="number" name="age" required  lay-verify="required" placeholder="请输入年龄" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">健康码状态：</label>
                                <div class="layui-input-block">
                                    <select name="ma" lay-verify="required">
                                        <option value=""></option>
                                        <option value="0">绿码</option>
                                        <option value="1">黄码</option>
                                        <option value="2">红码</option>

                                    </select>
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-form-label">是否接种疫苗：</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" name="switch" lay-skin="switch">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">单选框</label>
                                <div class="layui-input-block">
                                    <input type="radio" name="sex" value="男" title="男" checked>
                                    <input type="radio" name="sex" value="女" title="女" >
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn btn" lay-submit lay-filter="formDemo">立即提交</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </li>

                <!-- 首页 -->
                <li  class="show">
                    <div class="layui-container two-container-row dd">

                        <div class="layui-row row-box">
                            <h2>欢迎${sessionScope.username}进入智慧社区服务管理平台</h2>

                        </div>


                    </div>
                </li>
                <!-- 内容四 -->
                <li class="hidden">
                    <table id="demo" lay-filter="test"></table>
                </li>
                <!-- 内容五 -->
                <li class="hidden">
                    <div class="layui-container two-container-row dd">
                        <div class="layui-row">
                            <div class="layui-collapse">
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">作者</h2>
                                    <div class="layui-colla-content layui-show">20计科一班阮国真，有问题请联系作者;电话：**********；QQ：************；电子邮箱：1256382146@qq.com</div>
                                </div>
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">疫情介绍</h2>
                                    <div class="layui-colla-content layui-show">（一）对密切接触者，将“7天集中隔离+3天居家健康监测”管理措施调整为“5天集中隔离+3天居家隔离”，期间赋码管理、不得外出。集中隔离医学观察的第1、2、3、5天各开展1次核酸检测，居家隔离医学观察第1、3天各开展1次核酸检测。

                                        （二）及时准确判定密切接触者，不再判定密接的密接。

                                        （三）将高风险区外溢人员“7天集中隔离”调整为“7天居家隔离”，期间赋码管理、不得外出。在居家隔离第1、3、5、7天各开展1次核酸检测。

                                        （四）将风险区由“高、中、低”三类调整为“高、低”两类，最大限度减少管控人员。原则上将感染者居住地以及活动频繁且疫情传播风险较高的工作地和活动地等区域划定为高风险区，高风险区一般以单元、楼栋为单位划定，不得随意扩大；高风险区所在县（市、区、旗）的其他地区划定为低风险区。高风险区连续5天未发现新增感染者，降为低风险区。符合解封条件的高风险区要及时解封。</div>
                                </div>
                                <div class="layui-colla-item">
                                    <h2 class="layui-colla-title">系统介绍</h2>
                                    <div class="layui-colla-content layui-show">随着科学技术的飞速发展，社会的方方面面、各行各业都在努力与现代的先进技术接轨，通过科技手段来提高自身的优势，社区疫情防控管理信息系统当然也不能排除在外。社区疫情防控管理信息系统是以实际运用为开发背景，运用软件工程开发方法，采用jsp技术构建的一个管理系统。整个开发过程首先对软件系统进行需求分析，得出系统的主要功能。接着对系统进行总.体设计和详细设计。总.体设计主要包括系统总体结构设计、系统数据结构设计、系统功能设计和系统安全设计等;详细设计主要包括模块实现的关键代码，系统数据库访问和主要功能模块的具体实现等。最后对系统进行功能测试，并对测试结果进行分析总结，及时改进系统中存在的不足，为以后的系统维护提供了方便，也为今后开发类似系统提供了借鉴和帮助。
                                        本社区疫情防控管理信息系统采用的数据库是Mysql，使用JSP技术开发。在设计过程中，充分保证了系统代码的良好可读性、实用性、易扩展性、通用性、便于后期维护、操作方便以及页面简洁等特点。
                                        关键词:社区疫情防控管理信息系统，JSP技术，Mysq1 数据库
                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="layui-row photo">
                            <!-- 放一张装饰的照片 -->
                        </div>
                    </div>
                </li>


            </ul>
        </div>
        <!-- 第二行中第二列  结束-->

    </div>
    <!-- 第二行 结束-->
</div>
<!-- 容器结束 -->

<!-- 引入layui库js文件 -->
<script src="./layui/layui.js"></script>
<script>
    layui.use(['table','carousel','form','layer'], function(){
        var table = layui.table;
        var carousel = layui.carousel;
        var form = layui.form;
        var layer = layui.layer;
        var tableIns = table.render();

        var tableIns = table.render({

            elem: '#demo'
            ,height: 500 //容器高度
            ,page:false

            ,cols: [[ //表头
                {templet: function(d){
                        // console.log(d);
                        return d.LAY_INDEX},title: 'ID', width:80, sort: true, fixed: 'left'}
                ,{field: 'header', title: '标题', width:150}
                ,{field: 'msgtype', title: '公告类型', width:200, sort: true}
                ,{field: 'msgmember', title: '公告成员', width:100}
                ,{field: 'msgtext', title: '主题内容'}
                ,{field: 'timer', title: '发布时间', width: 280, sort: true}

                ,{ title: '查看', width:150, align:'center', toolbar: '#barDemo'}

            ]] //设置表头
            ,url: '/usermsg' //设置异步接口

        });
        //    定时器更新表格数据
        setInterval(function (){
            tableIns.reload('demo'); //重新渲染数据
        },30000)


        //工具条事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'detail'){ //查看
                console.log(tr[0]);
                let str =` <div class="layui-fluid">
                                <div class="layui-row">
                                    <div class="layui-col-md6 layui-col-md-offset3">
                                        <h3 style="text-align: center">\${tr[0].children[1].children[0].innerHTML}</h3>
                                        <h5 style="text-align: right">\${tr[0].children[2].children[0].innerHTML}</h5>
                                    </div>
                                 </div>
                                 <div class="layui-row">
                                    <div class="layui-col-md9 layui-col-md-offset2">
                                       <p>\${tr[0].children[3].children[0].innerHTML}:</p>
                                    </div>
                                 </div>
                                   <div class="layui-row" style="margin-top: 50px">
                                    <div class="layui-col-md9 layui-col-md-offset2">
                                       <p>\${tr[0].children[4].children[0].innerHTML}</p>
                                    </div>
                                 </div>
                                  <div class="layui-row">
                                    <div class="layui-col-md3 layui-col-md-offset9" style="margin-top: 50px">
                                       <p>\${tr[0].children[5].children[0].innerHTML}</p>
                                    </div>
                                 </div>
                               </div>`;
                var index = layer.open({
                    type:1,
                    title:'公告',
                    skin: 'layui-layer-molv',
                    area: ['500px', '600px'],
                    shade:0.3,
                    closeBtn:2,
                    content: str,
                });
            }
        });


    });
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>

</script>
</body>
</html>
